import React, { useState, useEffect } from 'react';
import { Row, Col, Card, Statistic, Progress, List, Typography, Divider } from 'antd';
import { 
  HomeOutlined, 
  AppstoreOutlined, 
  ShoppingOutlined, 
  BarChartOutlined,
  RiseOutlined,
  AlertOutlined
} from '@ant-design/icons';
import './HomePage.css';

const { Title, Paragraph } = Typography;

interface StatisticData {
  totalShelves: number;
  totalBoxes: number;
  totalSkuTypes: number;
  totalSkuCount: number;
  usageRate: number;
}

interface RecentActivity {
  id: number;
  action: string;
  target: string;
  time: string;
  operator: string;
}

const HomePage: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [statistics, setStatistics] = useState<StatisticData>({
    totalShelves: 0,
    totalBoxes: 0,
    totalSkuTypes: 0,
    totalSkuCount: 0,
    usageRate: 0
  });
  const [recentActivities, setRecentActivities] = useState<RecentActivity[]>([]);

  useEffect(() => {
    // 模拟加载数据
    const fetchData = () => {
      setLoading(true);
      
      // 这里应该是从API获取数据，现在使用模拟数据
      setTimeout(() => {
        setStatistics({
          totalShelves: 18,
          totalBoxes: 156,
          totalSkuTypes: 42,
          totalSkuCount: 1872,
          usageRate: 76.5
        });
        
        setRecentActivities([
          { id: 1, action: '添加', target: '货架CD012', time: '2023-05-15 14:30', operator: '管理员' },
          { id: 2, action: '更新', target: '货架CD001', time: '2023-05-15 13:25', operator: '管理员' },
          { id: 3, action: '删除', target: '货架A003', time: '2023-05-14 16:42', operator: '管理员' },
          { id: 4, action: '添加', target: '货架HJ100002', time: '2023-05-14 11:20', operator: '管理员' },
          { id: 5, action: '更新', target: '货架FN-001', time: '2023-05-13 09:15', operator: '管理员' },
        ]);
        
        setLoading(false);
      }, 1000);
    };
    
    fetchData();
  }, []);

  return (
    <div className="home-page">
      <Title level={2}>
        <HomeOutlined /> 仓库管理系统首页
      </Title>
      <Paragraph>欢迎使用仓库管理系统，您可以在这里查看仓库概况和最近活动。</Paragraph>
      
      <Divider />
      
      {/* 统计数据卡片 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col xs={24} sm={12} md={6}>
          <Card loading={loading}>
            <Statistic
              title="货架总数"
              value={statistics.totalShelves}
              prefix={<AppstoreOutlined style={{ color: '#1890ff' }} />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card loading={loading}>
            <Statistic
              title="箱子总数"
              value={statistics.totalBoxes}
              prefix={<ShoppingOutlined style={{ color: '#52c41a' }} />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card loading={loading}>
            <Statistic
              title="SKU种类"
              value={statistics.totalSkuTypes}
              prefix={<BarChartOutlined style={{ color: '#faad14' }} />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card loading={loading}>
            <Statistic
              title="SKU总数"
              value={statistics.totalSkuCount}
              prefix={<RiseOutlined style={{ color: '#eb2f96' }} />}
            />
          </Card>
        </Col>
      </Row>
      
      {/* 仓库使用率 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col xs={24} md={12}>
          <Card title="仓库使用率" loading={loading}>
            <Progress
              type="circle"
              percent={statistics.usageRate}
              format={percent => `${percent}%`}
              width={120}
              strokeColor={{
                '0%': '#108ee9',
                '100%': '#87d068',
              }}
            />
            <div style={{ marginTop: 16 }}>
              <Paragraph>
                当前仓库使用率为 <strong>{statistics.usageRate}%</strong>，
                {statistics.usageRate > 80 ? (
                  <span style={{ color: '#ff4d4f' }}>接近饱和，请考虑扩容</span>
                ) : (
                  <span style={{ color: '#52c41a' }}>运行良好</span>
                )}
              </Paragraph>
            </div>
          </Card>
        </Col>
        
        {/* 最近活动 */}
        <Col xs={24} md={12}>
          <Card 
            title={
              <span>
                <AlertOutlined style={{ marginRight: 8 }} />
                最近活动
              </span>
            } 
            loading={loading}
          >
            <List
              size="small"
              dataSource={recentActivities}
              renderItem={item => (
                <List.Item>
                  <Typography.Text mark>[{item.action}]</Typography.Text> {item.target}
                  <div>
                    <small>{item.time} by {item.operator}</small>
                  </div>
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>
      
      {/* 系统信息 */}
      <Card title="系统信息">
        <Row gutter={16}>
          <Col span={24}>
            <Paragraph>
              <strong>系统版本：</strong> v1.0.0
            </Paragraph>
            <Paragraph>
              <strong>最后更新：</strong> 2023-05-15
            </Paragraph>
            <Paragraph>
              <strong>技术支持：</strong> 仓库管理系统团队
            </Paragraph>
          </Col>
        </Row>
      </Card>
    </div>
  );
};

export default HomePage; 